<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="css/style1.css"/>
    <link rel="stylesheet" href="css/iview.css"/>
    <link rel="stylesheet" href="css/map.css"/>
    <title></title>
    <style>
        .ivu-picker-panel-body {
            color: black;
        }

        #shishiRenliu {
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
        }

        #shishiRenliu > i {
            border-radius: 0.5rem;
        }

        #shishiRenliu > i:not(:last-child) {
            font-size: 2.2rem;
            padding: .5rem .5rem .5rem .3rem !important;
            margin-right: 0.5rem;
        }

        #shishiRenliu > i.num {
            background: -webkit-linear-gradient(top, #00c6ff, #009dff);
            background: -o-linear-gradient(top, #00c6ff, #009dff);
            background: -moz-linear-gradient(top, #00c6ff, #009dff);
            background: -ms-linear-gradient(top, #00c6ff, #009dff);
        }

        #shishiRenliu > i:last-child {
            padding-top: 1rem;
        }

        .ivu-date-picker input {
            background-color: #696969;
        }

        [v-cloak] {
            visibility: hidden;
        }
    </style>
</head>

<body>
<div class="container">
    <div class="dis_bg">
        <div class="btnbg">隐藏</div>
        <div class="btncontain chose">展开</div>
    </div>
    <div id="map" style="width:100vw;height:100vh;">
        <div id="date">
            <date-picker type="date" v-model="date"></date-picker>
        </div>
        <div id="sstdl">
            实时投递量
            <div>
                <span v-text="text"></span>

                <span style="font-size: 1rem">条</span>
            </div>
        </div>
        <div class="echerts-item" id="allmap"
             style="height: 10%;width: 100%;z-index:1;position: absolute;bottom: 2%"></div>
    </div>

 <div class="conMain">
     <div class="header">
         <div class="header-left">
             <img src="img/logo1.png"/>
             <span style="width: 95px">数字黔游</span>
             <span class="line_top"></span>
             <img :src="logUrl"/>
             <p class="time_bg" >
                 <span id="time"></span>
                 <span style="display: block;height: 100%;margin-top: -5px;margin-left: 3px">
                     <span>贵州</span>
                     <img src="img/tq.png" style="height: 24%;margin-left: 5px;"/>
                     <span style="margin-left: 5px;">阴</span>
                     <span> 27°</span>
                </span>
             </p>
         </div>
         <div class="header_center" v-text="Toptitle"></div>
         <div class="header-right" v-cloak>
             <ul>
                 <li style="visibility: hidden;"><img src="img/tc.png"> 退出大屏</li>
                 <li style="cursor: pointer" onclick="window.location='admin/src/page/index.html'" v-if="isAdmin"><img src="img/zhsz.png"> 账户设置
                 </li>
                 <li style="cursor: pointer" onclick="window.location=GET_logout"><img src="img/tcdl.png"> 退出登录</li>
                 <li style="visibility: hidden;"><img src="img/fh.png"> 返回</li>
             </ul>
         </div>
     </div>
     <div class="con_left">
         <div class="itembg taday_bg">
             <p class="title_p"><img :src="icoUrl"/>今日访客</p>
             <div class="item_con">
                 <span class="num" v-for="v of numArr" v-text="v"></span>
                 <small style="margin-left: 2%">人</small>
             </div>
         </div>
         <div class="itembg tdjc_bg" id="toudi_jiance">
             <p class="title_p"><img :src="icoUrl"/>投递检测</p>
             <div class="item_con">
                 <div class="gif_bg">
                     <img src="img/imginfo.gif" class="imginfo">
                 </div>
                 <div class="imgInfo_bg">
                     <div class="imgContain">
                         <ul style="height: 100%;width: 100%;text-align: center">
                             <li v-for="v of arr" v-text="v"></li>
                         </ul>
                     </div>
                 </div>
             </div>
         </div>
         <div class="itembg fkzl_bg">
             <p class="title_p"><img :src="icoUrl"/>访客驻留分析</p>
             <div class="item_con" id="vis_res"></div>
         </div>
         <div class="itembg fkzl_bg">
             <p class="title_p"><img :src="icoUrl"/>访问景区TOP5</p>
             <div class="item_con" id="top5"></div>
         </div>
     </div>

     <div class="con_right right-item">
         <div class="itembg fkzl_bg">
             <p class="title_p"><img :src="icoUrl"/>短信投递</p>
             <div class="item_con">
                 <div class="right-borde">
                     <div class="boedr-cont">
                         <p>
                             <span>今日累计投递量</span>
                             <span><strong class="num_info" v-text="AccToday"></strong>  条</span>
                         </p>
                     </div>
                     <div class="boedr-cont">
                         <p><span>昨日累计投递量</span>
                             <span><strong class="num_info" v-text="AccYesterday"></strong>  条</span>
                         </p>
                     </div>
                 </div>
                 <div class="right-borde">
                     <div class="boedr-cont">
                         <p><span>今年累计投递量</span>
                             <span><strong class="num_info" v-text="AccYear"></strong>  条</span>
                         </p>
                     </div>
                     <div class="boedr-cont">
                         <p><span>日访客旅游占比</span>
                             <span><strong class="num_info" v-text="OccRatio"></strong> 条</span>
                         </p>
                     </div>
                 </div>
             </div>
         </div>
         <div class="itembg fkzl_bg">
             <p class="title_p"><img :src="icoUrl"/> 来源地排行</p>
             <div class="item_con" id="sendmsg_ph"></div>
         </div>
         <div class="itembg fkzl_bg" style="position: relative;height: 32%">
             <p class="title_p"> <img :src="icoUrl"/> 访客统计</p>
             <div class="item_con" id="vis_tj" style="display: block"></div>
             <div class="sex_bg">
                 <div class="sex">
                     <div class="both_left">
                         <span>男</span>
                         <img src="img/icon_man.png">
                     </div>
                     <div class="reudre_line">
                         <div class="man_sex"></div>
                         <div class="woman_sex"></div>
                     </div>
                     <div class="both_right">
                         <img src="img/icon_woman.png">
                         <span>女</span>
                     </div>
                 </div>
             </div>
             <div class="hover_bg">
                 <p class="man_hov man_class">
                     <span>男：</span>
                     <span>数量：<span class="man_num">12222</span></span>
                     <span>占比：<span class="man_per">12222</span></span>
                 </p>
                 <p class="woman_hov man_class">
                     <span>女：</span>
                     <span>数量：<span class="woman_num">12222</span></span>
                     <span>占比：<span class="woman_per">12222</span></span>
                 </p>
             </div>
         </div>
     </div>
 </div>
</div>
<script src="https://webapi.amap.com/maps?v=1.4.10&key=c365db6b159687edff9ea558b4c72845"></script>
<script src="js/vue.js"></script>
<script src="js/iview-3.1.3/iview.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/mock.js"></script>
<script src="js/api.js"></script>
<script src="js/echarts-4.2.0.rc1.js"></script>
<script src="js/dayjs.min.js"></script>
<script src="js/lodash.js"></script>
<script src="js/star/jquery.js"></script>
<script src="js/jquery.SuperSlide.js"></script>

<script src="js/mystyle.js"></script>
<script src="js/shishi_toudiliang&jinri_fangke.js"></script>
<script src="js/myechert.js"></script>
<script src="js/map.js"></script>

<script>
    new Vue({
        el: '.conMain',
        data: {
            numArr: [],
            arr: [],
            AccToday: '',
            AccYesterday: '',
            AccYear: '',
            OccRatio: '',
            isAdmin: false,
            logUrl:'img/bottomkuan.png',
            Toptitle:'数据黔游',
            icoUrl:'img/ico.png'
        },
        created() {
            //投递检测
            axios.get(gerinfo_msg).then(resp => {
                this.arr = resp.data.data;
                this.$nextTick(() => {
                    jQuery(".imgContain").slide({
                        mainCell: "ul",
                        autoPlay: true,
                        effect: "topMarquee",
                        vis: 5,
                        interTime: 50,
                        trigger: "click"
                    });

                    jQuery(".imgContain").slide({
                        mainCell: "ul",
                        autoPlay: true,
                        effect: "topMarquee",
                        vis: 5,
                        interTime: 150,
                        trigger: "click"
                    });
                });
            });
            let loginData = JSON.parse(sessionStorage.loginData);
            if (loginData['是否管理员'] == 1 || loginData['是否超级管理员'] == 1)
                this.isAdmin = true;
            this.init();
        },
        beforeMount(){
            //短信投递
            axios.get(imgInfo, {
                params: {}
            }).then(resp=> {
                var str = resp.data.data;
                this.AccToday = str.今日累计;
                this.AccYesterday = str.昨日累计;
                this.AccYear = str.今年累计;
                this.OccRatio = str.日访客占比;
                console.log(this.AccToday)
            }).catch(function (err) {
                console.log(err)
            });

            //自定义设置
            axios.get(GET_getSetting,{
            }).then(resp=>{
                let str = resp.data.data
                console.log(str);
                let logoUrl = str.logo
                this.logUrl = logoUrl;
                this.Toptitle = str.title;
                this.icoUrl = str.icon;
            })
        },
        methods: {
            //今日访客数据
            init(date = '') {
                axios.get(GET_getDayVisitor, {
                    params: {date}
                }).then(resp => {
                    this.numArr = resp.data.data['今日访客数'].split('');
                });
            }
        },
    });
</script>
</body>
</html>